<template>
  <div class="buy">
    <van-nav-bar title="确认订单" left-arrow @click-left="onClickLeft" fixed placeholder />
    <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @edit="onEdit" />
    <div>
      <van-card v-for="(item,index) in data" :key="index+'px'" :num="item.select_num"
        :price="((item.price-0)*item.select_num).toFixed(2)" :desc="item.text" :title="item.name"
        :thumb="item.imgs?item.imgs[0].url:$url+'img/redmi9.jpg'">
      </van-card>
    </div>
    <van-divider />

    <van-password-input v-show='showKeyboard' :value="value" @focus="showKeyboard = true" :error-info="errorInfo" />
    <van-number-keyboard v-model="value" :show="showKeyboard" :maxlength="6" @blur="show = false"
      :safe-area-inset-bottom="false" />
    <van-submit-bar :price="money" button-text="结算" @submit="onSubmit" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      chosenAddressId: "1", //选择地址id
      list: [], //地址数据
      data: [], //商品数据
      user: [], //用户信息
      errorInfo: "",
      PaymentPassword: "",
      value: "",
      showKeyboard: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onEdit() {
      this.$router.push("/address");
    },
    //读取订单信息
    onSubmit() {
      if (this.PaymentPassword == "") {
        this.$toast.fail("请先完善支付信息");
        this.$router.push("/personal");
      } else if (this.showKeyboard == false) {
        //显示支付密码输入
        this.showKeyboard = true;
        //数字键盘位置固定修改
        let a = document.querySelector(".van-tabbar").offsetHeight;
        let b = document.querySelector(".van-password-input");
        b.style.position = "fixed";
        b.style.width = "100%";
        b.style.zIndex = 100;
        b.style.top = "45%";
        document.querySelector(".van-number-keyboard").style.bottom = a + "px";
      } else {
        this.showKeyboard = false;
        this.value = "";
      }
    },
    getData() {
      let sta = localStorage.getItem("sta");
      sta = JSON.parse(sta);
      if (sta.sx == 1) {
        let myurl1 = this.$url + "user_login";
        this.axios.post(myurl1, { user: sta.tel }).then((res1) => {
          this.PaymentPassword = JSON.parse(res1.data.data)[0].PaymentPassword;
        });
        //读取用户收货地址
        let myurl = this.$url + "address_read";
        this.axios.post(myurl, { user_id: sta.id }).then((res) => {
          let data_base = JSON.parse(res.data.data);
          for (let i = 0; i < data_base.length; i++) {
            let a = {};
            a.id = data_base[i].id;
            a.name = data_base[i].name;
            a.tel = data_base[i].tel;
            a.address =
              data_base[i].province +
              data_base[i].city +
              data_base[i].county +
              data_base[i].addressDetail;
            if (data_base[i].isDefault == "true") {
              a.isDefault = true;
              this.chosenAddressId = a.id;
              this.list = [];
              this.list.push(a);
              break;
            } else {
              this.chosenAddressId = a.id;
              a.isDefault = false;
              this.list = [];
              this.list.push(a);
            }
          }
        });
        //读取用户订单信息
        setTimeout(() => {
          let order = localStorage.getItem("order");
          order = JSON.parse(order);
          if (order.sx == 1) {
            for (let i = 0; i < order.id.length; i++) {
              let myur = this.$url + "order_read";
              this.axios.post(myur, { id: order.id[i] }).then((res) => {
                let a = res.data.data;
                a = a.replace(/\\/g, "");
                a = a.replace(/:"\[/g, ":[");
                a = a.replace(/\]"/g, "]");
                a = JSON.parse(a);
                if (a[0].is_payment == "false") {
                  this.data.push(a[0]);
                }
              });
            }
          }
        }, 300);
      }
    },
  },
  created() {
    this.getData();
  },
  computed: {
    money() {
      let num = 0;
      for (let i = 0; i < this.data.length; i++) {
        num += (this.data[i].price - 0) * this.data[i].select_num * 100;
      }
      return num;
    },
  },
  watch: {
    //支付密码输入判断
    value(value) {
      if (value.length === 6 && value !== this.PaymentPassword) {
        this.errorInfo = "密码错误";
      } else {
        this.errorInfo = "";
      }
      if (value.length === 6 && value == this.PaymentPassword) {
        let myurl = this.$url + "order_change";
        for (let i = 0; i < this.data.length; i++) {
          let data_order = {
            id: this.data[i].id,
            select_num: this.data[i].select_num,
            is_payment: true,
            is_refund: this.data[i].is_refund,
            is_get: this.data[i].is_get,
            is_deliver: this.data[i].is_deliver,
            estimate: this.data[i].estimate,
            is_to_refund: this.data[i].is_to_refund,
          };
          this.axios.post(myurl, { data_order }).then((res) => {
            this.$toast.success("付款成功");
            console.log(res);
          });
        }
        this.$router.push("/order/2");
      }
    },
  },
  mounted() {
    //获取头部框
    let a = document.querySelector(".van-hairline--bottom");
    //地址栏位置固定
    let c = document.querySelector(".van-radio-group");
    c.style.position = "fixed";
    c.style.width = "100%";
    c.style.zIndex = 99;
    c.style.top = a.offsetHeight + "px";
    //商品菜单位置改变
    let b = document.querySelector(".van-address-list");
    console.log(b)
    b.style.position = "relative";
    b.style.top = a.scrollHeight + "px";
    b.style.height = "12%";
    this.$nextTick(function () {
      this.$forceUpdate();
    });
  },
};
</script>

<style scoped>
#app .buy {
  height: 100%;
  overflow: scroll;
}
.buy::-webkit-scrollbar {
  display: none;
}

.van-address-list__bottom {
  display: none;
}
.van-address-list {
  margin: 5% 2%;
  padding: 0;
}
.van-nav-bar__text {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.6);
}
</style>